<template>
  <div class="index">
    <!-- 顶部导航栏 -->
    <van-nav-bar @click-left="xqleft" title="购物详情" class="head">
      <template #left>
        <van-icon name="arrow-left" size="20px" />
      </template>
    </van-nav-bar>
    <div>
      <!-- 上边图 -->
      <div>
        <img :src="list.pic" style="width:100%;" />
      </div>
      <div class="group">
        <div class="a-group">
          <h4>{{ list.name }}</h4>
          <br />
          <span>鲜嫩爽口 清香入味</span><br />
          <span>全面质检</span>
        </div>
        <div class="b-group">
          <span>配送</span>
          <span>立即下单,预计 今日17:21送达</span><br />
          <span>促销</span>
          <span>满9.9可换购超值商品</span><br />
          <span>已领券</span>
        </div>
        <div class="c-group">
          <h4>用户评价</h4>
          <span>(54351)</span>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <van-goods-action>
      <van-goods-action-icon icon="home-o" text="首页" @click="xqhome" />
      <van-goods-action-icon icon="chat-o" text="客服" @click="xqlxkf" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="xqgwc" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="jrgwc"
      />
      <van-goods-action-button type="danger" text="立即购买" @click="xqbtn" />
    </van-goods-action>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      current: 0, //轮播图
      h: "180px", //轮播高
      // list:
      //   {mz:"松花菜500g",kw:"鲜嫩爽口 清香入味",qmtj:"全面质检",ps:"配送",xd:"立即下单,预计 今日17:21送达",cx:"促销",man:"满9.9可换购超值商品",yjuan:"已领券",yhp:"用户评价",sz:5351,tp:require("../assets/detail/1.jpg")},
      list: {},
      count: 0,
    };
  },
  //计算属性
  computed: {
    ...mapState(["jsshopping"]),
  },

  methods: {
    // 左边的按钮
    xqleft() {
      this.$router.push("/fenlei");
    },
    //下边购物车
    xqgwc() {
      console.log(this.$router.push("/gouwuche"));
      this.$router.push("/gouwuche").catch((err) => console.log(err, "出错了"));
    },
    //联系客服
    xqlxkf() {
      this.$router.push("/lianxikefu");
    },
    // 返回首页
    xqhome() {
      this.$router.push("/homes");
    },
    //加入购物车
    jrgwc() {
      // this.$store.commit('gwc',false)
      this.count++;
      if (this.count == 1) {
        this.onfuw((list) => {
          // console.log()
          // let s=JSON.stringify(list)
          let s = list;
          // console.log(s)
          this.$store.commit("gwc", s);
        });
      }
    },
    //立即购买
    xqbtn() {},
    //请求数据
    onfuw(callback) {
      let id = this.$route.params.id;
      //console.log(`输出`+id);
      this.axios
        .get(`/jisuapi/detail?id=${id}&appkey=b0e7418fe9bef46dcb47a53374ffbef1`)
        .then((res) => {
          // console.log(res.data.result)
          let list = res.data.result.result;
          callback(list);
        });
    },
  },
  mounted() {
    // this.initSwipe();
    this.onfuw((list) => {
      this.list = list;
    });
  },
};
</script>
<style scoped>
.index .van-nav-bar {
  /* 统一主色调 */
  background-color: rgb(123, 183, 253);
}
.index .van-nav-bar__title,
.index .van-nav-bar__left .van-icon,
.index .van-nav-bar__right .van-icon {
  color: white;
}
/* 内容 */
.group {
  text-align: justify;
  margin-left: 10px;
}
.group h4 {
  display: inline;
}
.group span {
  display: inline;
  font-size: 13px;
}
.a-group {
  margin-bottom: 10px;
  line-height: 22px;
}
.b-group {
  margin-bottom: 10px;
  line-height: 35px;
}
.a-group > span:nth-child(3) {
  color: #a4a4a5;
}
.b-group > span:nth-child(1) {
  margin-right: 20px;
  font-weight: bolder;
}
.b-group > span:nth-child(4) {
  margin-right: 20px;
  font-weight: bold;
}
.b-group > span:nth-child(7) {
  margin-right: 20px;
  font-weight: bold;
}
.van-nav-bar .van-icon {
  color: black;
}
</style>
